<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>编辑</title>
		<link rel="stylesheet" type="text/css" href="../../plugins/layui/css/layui.css" />
		<link href="../../kitAdmin/css/app.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="../../plugins/select2/dist/css/select2.min.css"/>
		<style type="text/css">
			/* .select2-container{
				display:none;
			} */
/* 			// 2018-10-14 chenbin: 屏蔽layui的select */
			.layui-unselect.layui-form-select {
			    display: none;
			}
		</style>
	</head>

	<body>
		<div class='kit-table'>
			<div style='margin:10px'>
		<form class='layui-form' action='' lay-filter='form-edit' id ="_form" readonly>
			<input type='hidden' name='orderId' data-link='{:orderId}' />
			<input type='hidden' name='submitStatus' data-link='{:submitStatus}' id="_submitStatus" />

			<!--<input type='hidden' name='submitStatus' data-link='{:submitStatus}' />-->

			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>英文名</label>
					<div class='layui-input-inline'>
						<input type='text' placeholder=''data-link='{:enName}' id='_enName' name='enName' class='layui-input'>
					</div>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>性别</label>
					<div class='layui-input-inline'>
						<select data-link='{:sex}' id='_sex' name='sex' class='layui-input'></select>
					</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>年龄</label>
					<div class='layui-input-inline'>
						<input type='text' placeholder=''data-link='{:age}' id='_age' name='age' class='layui-input'>
					</div>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>QQ号</label>
					<div class='layui-input-inline'>
						<input type='text' placeholder=''data-link='{:qq}' id='_qq' name='qq' class='layui-input'>
					</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>微信号</label>
					<div class='layui-input-inline'>
						<input type='text' placeholder=''data-link='{:wechat}' id='_wechat' name='wechat' class='layui-input'>
					</div>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>Zoom ID</label>
					<div class='layui-input-inline'>
						<input type='text' placeholder=''data-link='{:zoomId}' id='_zoomId' name='zoomId' class='layui-input'>
					</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>邮箱</label>
					<div class='layui-input-inline'>
						<input type='text' placeholder=''data-link='{:email}' id='_email' name='email' class='layui-input'>
					</div>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>电话</label>
					<div class='layui-input-inline'>
						<input type='text' placeholder=''data-link='{:phone}' id='_phone' name='phone' class='layui-input'>
					</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>住址</label>
					<div class='layui-input-inline'>
						<input type='text' placeholder=''data-link='{:address}' id='_address' name='address' class='layui-input'>
					</div>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>状态</label>
					<div class='layui-input-inline'>
						<select data-link='{:state}' id='_state' name='state' class='layui-input'></select>
					</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>英语水平</label>
				 	<div class="layui-input-block">
					    <input type="radio" data-link='{:englishLevel}' name="englishLevel" value="基础" title="基础" checked=""/>
					    <input type="radio" data-link='{:englishLevel}' name="englishLevel" value="初级" title="初级"/>
					    <input type="radio" data-link='{:englishLevel}' name="englishLevel" value="中级" title="中级"/>
				 	</div>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>需要加强</label>
				 	<div class="layui-input-block">
					    <input type="checkbox" name="englishAbility" value="听" title="听">
					    <input type="checkbox" name="englishAbility" value="说" title="说">
					    <input type="checkbox" name="englishAbility" value="读" title="读">
					    <input type="checkbox" name="englishAbility" value="写" title="写">
				 	</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>外教</label>
					<div class='layui-input-inline'>
						<select data-link='{:teacherId}' id='_teacherId' name='teacherId' class='layui-input'></select>
					</div>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>负责人</label>
					<div class='layui-input-inline'>
						<select data-link='{:fuzerenId}' id='_fuzerenId' name='fuzerenId' class='layui-input'></select>
					</div>
				</div>

			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>推荐人</label>
					<div class='layui-input-inline'>
						<select data-link='{:recommendId}' id='_recommendId' name='recommendId' class='layui-input'></select>
					</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>试听时间</label>
					<div class="layui-input-inline" style="margin-right: 0px; width: 146px;">
				      	<input type='text' placeholder=''data-link='{:auditionTime}' id='_auditionTime' name='auditionTime' class='layui-input'>
					</div>
				    <span class="input-group-btn">
				        <a style="height: 38px;line-height:38px;" class="layui-btn layui-btn-sm" type="button" onclick="SetAuditionTime()">添加</a>
			      	</span>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>试听类型</label>
					<div class='layui-input-block'>
						<input type="radio" data-link='{:auditionType}' name="auditionType" value="新试听" title="新试听"/>
					 	<input type="radio" data-link='{:auditionType}' name="auditionType" value="二次试听" title="二次试听"/>
					</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>正式课预留时间</label>
					<div class="layui-input-inline" style="margin-right: 0px; width: 146px;">
						<input type='text' placeholder=''data-link='{:formalTime}' id='_formalTime' name='formalTime' class='layui-input'>
					</div>
					<span class="input-group-btn">
				        <a style="height: 38px;line-height:38px;" class="layui-btn layui-btn-sm" type="button" onclick="SetFormalTime()">添加</a>
			      	</span>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>课程</label>
					<div class='layui-input-inline'>
						<select data-link='{:lessonId}' id='_lessonId' name='lessonId' class='layui-input'></select>
					</div>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>课程等级</label>
					<div class='layui-input-inline'>
						<select data-link='{:lessonLevel}' id='_lessonLevel' name='lessonLevel' class='layui-input'></select>
					</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>来源</label>
					<div class='layui-input-inline'>
						<input type='text' placeholder=''data-link='{:source}' id='_source' name='source' class='layui-input'>
					</div>
				</div>
				<div class='layui-inline'>
					<label class='layui-form-label'>是否喜欢家庭作业</label>
					<div class='layui-input-block'>
						<input type="radio" data-link='{:homeworkLike}' name="homeworkLike" value="否" title="否"/>
					 	<input type="radio" data-link='{:homeworkLike}' name="homeworkLike" value="是" title="是"/>
					</div>
				</div>
			</div>
			<div class='layui-form-item'>
				<div class='layui-inline'>
					<label class='layui-form-label'>备注</label>
					<div class="layui-input-block">
		     			<textarea placeholder="请输入内容" data-link='{:remark}' id='_remark' name='remark'class="layui-textarea"></textarea>
		    		</div>
				</div>
			</div>
		</form>
			</div>
		</div>
		<script src="../../common/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/jsviews/jsviews.js" type="text/javascript"></script>
		<script src="../../plugins/select2/dist/js/select2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		
			var uid = getQueryVariable('orderId');
			var entity;


			$(document).ready(function(){
				bindFormData();
				bindSexSelect2();
				bindTeacherSelect2();
				bindRecommendSelect2();
				bindFuzerenSelect2();
				bindLessonSelect2();
				bindStateSelect2();

                var teacherId = $("#_teacherId").select2("val");
                var timeAud = $("#_auditionTime").val();
                var timeFom = $("#_formalTime").val();


                $("#_teacherId").on("select2:select", function (e) {
                    var cteacherId = $("#_teacherId").select2("val");
                    if (cteacherId != teacherId) {
                        $("#_auditionTime").val("");
                        $("#_formalTime").val("");
                    }else {
                        $("#_auditionTime").val(timeAud);
                        $("#_formalTime").val(timeFom);
                    }
                })


                //select2通过模板绑定值以后不会自动刷新，需手动刷新一下；
				//注意，layui的select和select2用的不是一个控件，如果使用layui的select下面的这句可以注释掉
				//如果是select2，这下面的需要保留
				$('select').select2().change();
				
				$('#_lessonId').on("select2:select",function(){
					$('#_lessonLevel').empty();
					$.ajax({
						url :baseUrl+ "/levels/select2/" + $(this).val(),
						async : false,
						dataType : 'json',
						success : function(result) {
							console.log('// 2018-10-14 chenbin: lessonLevel', result)
							$('#_lessonLevel').select2({
								data : result
							});
						},
						error: function(msg) {
							console.log('ajax failed!', msg);
						}
					});
				});
				
				layui.use(['form'], function(){
					var form = layui.form;
				});
			});

			function bindFormData(){
				if(uid){
					$.ajax({
						url:baseUrl+'/freeAuditions/'+uid,
						type:'get',
						success:function(data){
							entity=data.data;
							bindEnglishAbility();
							bindLessonLevelSelect2();
							$.link(true, ".kit-table", entity);
							$('select').select2().change();

                            if (entity.submitStatus != null && entity.submitStatus == '已提交') {
                                $('input').attr("readonly", "readonly")//将input元素设置为readonly
                                $('select').attr("disabled", "disabled")//将input元素设置为readonly
                            }
						},
						error:function(){
							parent.layer.alert('系统或网络错误！');
						}
					});
				}
			}
			
			function bindSexSelect2() {
				var sexData = [ {
					id : '请选择',
					text : '请选择'
				}, {
					id : '男',
					text : '男'
				}, {
					id : '女',
					text : '女'
				} ];

				$('#_sex').select2({
					data : sexData
				});
			}
			
			function bindLessonSelect2() {
				var lessonData = [];
				$.ajax({
					type : "get",
					url :baseUrl+ '/lessons/select2',
					async : false,
					success : function(data) {
						lessonData = data;
						lessonData.unshift({
							id : '请选择',
							text : '请选择'
						});
					}
				});
				$('#_lessonId').select2({
					data : lessonData
				});
			}
			
			function bindLessonLevelSelect2() {
				var lessonLevelData = [];
				if (entity.lessonId != null) {
					$.ajax({
						type : "get",
						url :baseUrl+ '/levels/select2/'+entity.lessonId,
						async : false,
						success : function(data) {
							lessonLevelData = data;
							lessonLevelData.unshift({
								id : '请选择',
								text : '请选择'
							});
						},
						error: function(msg) {
							alert('系统或网络错误');
						}
					});
				}
				else {
					lessonLevelData.unshift({
						id : '请选择课程',
						text : '请选择课程'
					});
				}
				$('#_lessonLevel').select2({
					placeholder: '请先选择课程',
					allowClear: true,
					data : lessonLevelData
				});
			}

			function bindEnglishAbility() {
				var functional = entity.englishAbility;
				var groupCheckbox = $("input[name='englishAbility']");
				if (functional != null && functional != '') {
					// 2018-9-25 chenbin: 解决原数据无法绑定问题
					for (i = 0; i < groupCheckbox.length; i++) {
						var val = groupCheckbox[i].value;
	 					if (functional.split(',').indexOf(val) != -1) {
	 						groupCheckbox[i].checked = true;
	 					}
					}
				}
			}

			function bindRecommendSelect2() {
				var courceData = [];
				$.ajax({
					type : "get",
					url :baseUrl+ '/students/select2',
					async : false,
					success : function(data) {
						courceData = data;
						courceData.unshift({
							id : '请选择',
							text : '请选择'
						});
					}
				});

				$('#_recommendId').select2({
					data : courceData
				});
			}
			
			function bindFuzerenSelect2() {
				var fuzerenData = [];
				$.ajax({
					type : "get",
					url : baseUrl+'/admins/select2',
					async : false,
					success : function(data) {
						fuzerenData = data;
						fuzerenData.unshift({
							id : '请选择',
							text : '请选择'
						});
					}
				});
				$('#_fuzerenId').select2({
					data : fuzerenData
				});
			}
			
			function bindTeacherSelect2() {
				var teacherData = [];
				$.ajax({
					type : "get",
					url :baseUrl+ '/teachers/select2',
					async : false,
					success : function(data) {
						//console.log(data);
						teacherData = data;
						teacherData.unshift({
							id : '请选择',
							text : '请选择'
						});
					}
				});
				$('#_teacherId').select2({
					data : teacherData
				});
				$('#_teacherId').select2().trigger('change');
			}
			
			function bindStateSelect2() {
				var stateData = [{
					id : '待跟进',
					text : '待跟进'
				},
				{
					id : '跟进中',
					text : '跟进中'
				},
				{
					id : '完成',
					text : '完成'
				},
				{
					id : '失联',
					text : '失联'
				}];
				$('#_state').select2({
					placeholder: '请选择状态',
					allowClear: true,
					data: stateData
				});
			}


			function SetAuditionTime(){
				var teacherid=$("#_teacherId").val();
				var studentName=$("#_enName").val();
				var orderId = $("orderId").val();

				if(teacherid=="请选择"){
					alert("请选择老师");
					return;
				}
				var studentid=uid;
				parent.layer.open({
					id:teacherid+'info',
					maxmin: true,
					type: 2,
					area: modalArea,
					content: './views/Period_Used.html?orderId='+orderId+'&techerid='+teacherid+'&studentid='+uid+'&studentName='+encodeURI(studentName),
					btn: ['保存', '取消'],
					yes: function(index, layero) {
                        var data_check = $(layero).find("iframe")[0].contentWindow.callback_check();
                        // if(data_check>1){
                        //     alert("试听时间只能选择一个时间段，请重新选择！")
                        //     return false;
                        // }
                        if (entity.submitStatus != null && entity.submitStatus == '已提交') {
                            parent.layer.close(index);
                            return false;
                        }

                        var data = $(layero).find("iframe")[0].contentWindow.callback_save();
                        console.log(layero);
						$.ajax({
							// url:baseUrl+ '/teacherPeriods/periodUsed/save/'+data[0]+'&'+data[2]+'&'+orderId,
							url:baseUrl+ '/teacherPeriods/periodUsed/save/'+data[0]+'&'+data[2],
							type: 'POST',
							data: data[1],
							dataType:"json",      
			           		contentType:"application/json",
							success: function(data) {
                                $("#_auditionTime").val(data.data);
                                parent.layer.close(index);
                            }
						});
					},
					btn2: function(index, layero) {
						//按钮【按钮二】的回调
						console.log(layero);
						//return false 开启该代码可禁止点击该按钮关闭
					}
				});
			}

            function SetFormalTime(){
                var teacherid=$("#_teacherId").val();
                var studentName=$("#_enName").val();
                if(teacherid=="请选择"){
                    alert("请选择老师");
                    return;
                }
                var studentid=uid;
                parent.layer.open({
                    id:teacherid+'info',
                    maxmin: true,
                    type: 2,
                    area: modalArea,
                    content: './views/Period_Formal.html?techerid='+teacherid+'&studentid='+uid+'&studentName='+encodeURI(studentName),
                    btn: ['保存', '取消'],
                    yes: function(index, layero) {
                        var data = $(layero).find("iframe")[0].contentWindow.callback_save();
                        if (entity.submitStatus != null && entity.submitStatus == '已提交') {
                            parent.layer.close(index);
                            return false;
                        }
                        console.log(layero);
                        $.ajax({
                            url:baseUrl+ '/teacherPeriods/periodUsedFormal/save/'+data[0]+'&'+data[2],
                            type: 'POST',
                            data: data[1],
                            dataType:"json",
                            contentType:"application/json",
                            success: function(data) {
                                $("#_formalTime").val(data.data);
                                parent.layer.close(index);
                            }
                        });
                    },
                    btn2: function(index, layero) {
                        //按钮【按钮二】的回调
                        console.log(layero);
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
            }
			
			var callback_save=function(){
				var msg = $('.layui-form').serialize();
				msg = msg + "&teacherName="+$('#_teacherId option:selected').text();
				msg = msg + "&fuzerenName="+$('#_fuzerenId option:selected').text();
				msg = msg + "&recommendName="+$('#_recommendId option:selected').text();
				msg = msg + "&lessonName="+$('#_lessonId option:selected').text();
                return msg
			}
		</script>
	</body>

</html>
